<template>
  <div>
    <div slot="header" style="background: #fff;">
      <router-link :to="{name: 'custom-page-list'}">
        <el-button :round="true" icon="el-icon-back" plain size="small" style="margin: 10px 20px;">
          返回
        </el-button>
      </router-link>
    </div>

    <el-form :model="custom" ref="customForm" label-width="90px" class="main">
      <h4 class="rebate-label">页面设置</h4>
      <el-form-item label="名称" prop="title" style="margin-top: 50px;"
                    :rules="[{required: true, message: '页面名称不能为空', trigger: 'blur'}, {max: 255, message: '名称最多输入255个字符串', trigger: 'blur'}]">
        <el-input v-model="custom.title" placeholder="请输入页面名称" maxlength="255" show-word-limit/>
      </el-form-item>
      <el-form-item label="pc端图片">
        <upload-file accept="image/png,image/jpg,image/jpeg,image/gif"
                     :fileType="['png', 'jpg', 'jpeg', 'gif']"
                     :fileSize="30"
                     :isShowTip="true"
                     :lazy="true"
                     :responseFn="handleResponse"
                     :action="uploadPath"
                     title="图片"
                     v-model="custom.pcImage"
        ></upload-file>
        <p class="desc">图片大小不能超过30M</p>
      </el-form-item>
      <el-form-item label="移动端图片">
        <upload-file accept="image/png,image/jpg,image/jpeg,image/gif"
                     :fileType="['png', 'jpg', 'jpeg', 'gif']"
                     :fileSize="30"
                     :isShowTip="true"
                     :lazy="true"
                     :responseFn="handleResponse"
                     :action="uploadPath"
                     title="图片"
                     v-model="custom.mobileImage"
        ></upload-file>
        <p class="desc">图片大小不能超过30M</p>
      </el-form-item>
      <el-form-item label="内容" class="editForm-item" style="margin-top: 50px;">
        <tinymce v-model="custom.content" :height="500"/>
        <p style="margin: 0;color: #333">{{info}}</p>
      </el-form-item>
      <el-form-item style="margin-top: 50px;">
        <el-button type="primary" @click="handleReset()">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce';
import {addCusPage} from '@/api/custom';
import {mapGetters} from 'vuex';
import uploadFile from '_c/Upload/uploadFile.vue';

export default {
    name: 'custom-page-add',
    components: {Tinymce, uploadFile},
    data () {
        return {
            info: '店铺名请使用 {{shopname}}，客服邮箱请使用 {{serviceemail}}，{{ }}用于域名相关店铺信息替换,复制粘贴到文档时请勿修改{{}}中间的内容。',
            custom: {
                title: '',
                content: '',
                siteId: this.siteId
            },
            checked: false,
            submitLoading: false,
            dialogVisible: false,
            pageId: this.$route.params.id,
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file'
        };
    },
    mounted () {
    },
    methods: {
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit () {
            this.$refs['customForm'].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    this.custom.siteId = this.siteId;
                    addCusPage(this.custom).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('添加成功');
                            this.$router.push({name: 'custom-page-list'}).catch(() => {
                            });
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset () {
            this.$router.push({name: 'custom-page-list'}).catch(() => {
            });
        }
    },
    computed: {
        ...mapGetters(['timeZone']),
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
  background: #FFFFFF;
  min-height: 600px;
  border-top: 1px solid #EBEEF5;
}

.good-setting-panel {
  margin: 20px;
  font-size: 14px;

  .seoForm {
    color: #999;

    .introduce {
      margin: 10px 0;
    }

    .fixBottom {
      position: absolute;
      bottom: 20px !important;
      right: 20px;
    }
  }
}
</style>

<style>
.quillEditor /deep/ .ql-container {
  min-height: 200px !important;
}
</style>
